<template>
  <ul class="searchbox">
    <router-link :to="'/detail/' + item.proid" tag="li" v-for="item of searchlist" :key="item.proid">
      <div class="imgbox">
        <img :src="item.proimg" alt="">
      </div>
      <div class="kindinfo">
        <p class="k-t">{{ item.proname }}</p>
        <p class="k-saled">销量：{{ item.saled }}</p>
        <p class="specifications">
          <span class="price">￥{{ item.middlep }}.00</span>
          <span class="options" @click.stop="options(item)">选规格</span>
        </p>
      </div>
      <div class="cover" :style="{display:display}" @click.stop>
        <div class="coverinfo">
          <div class="cover-title">
            {{ proname }}
            <span class="dsappear" @click="disappear">x</span>
          </div>
          <div class="cover-content">
            <p class="cuptype">杯型:</p>
            <span class="midcup" @click="midcup" :style="{background:midbgc}" v-if="middlep">中杯</span>
            <span class="bigcup" @click="bigcup" :style="{background:bigbgc}" v-if="bigp">大杯</span>
          </div>
          <div class="cover-bottom">
            <span class="price">
              <span v-if="midflag">￥ {{ middlep }}</span>
              <span v-if="bigflag">￥ {{ bigp }}</span>
            </span>
            <span class="opt-type" v-if="!checkedflag">请选择规格</span>
            <span class="joincar" v-else @click="add">加入购物车</span>
          </div>
        </div>
      </div>
    </router-link>
  </ul>
</template>

<script>
import Vue from 'vue'
import axios from '@/utils/request'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  props: ['sMsg'],
  data () {
    return {
      searchlist: [],
      display: 'none',
      midbgc: '#f5f5f5',
      bigbgc: '#f5f5f5',
      midflag: 0,
      bigflag: 0,
      checkedflag: 0,
      price: '',
      proname: '',
      middlep: '',
      bigp: '',
      proid: ''
    }
  },
  methods: {
    add () {
      var userid = localStorage.userid
      // console.log(this.middlep, this.bigp, this.bigflag, this.midflag)
      var price = this.bigflag === 0 ? this.middlep : this.bigp
      axios.get('/cart/add?userid=' + userid + '&proid=' + this.proid + '&num=1&price=' + price).then(() => {
        Toast('加入购物车成功')
      })
    },
    options (item, eve) {
      this.display = 'block'
      this.proname = item.proname
      this.middlep = item.middlep
      this.bigp = item.bigp
      this.proid = item.proid
      // console.log(item.proid)
    },
    disappear () {
      this.display = 'none'
    },
    midcup () {
      if (this.midflag === 0) {
        this.midflag = 1
        this.bigflag = 0
        this.checkedflag = 1
        this.midbgc = 'rgba(255,113,0,.2)'
        this.bigbgc = '#f5f5f5'
      } else {
        this.midflag = 0
        this.checkedflag = 0
        this.midbgc = '#f5f5f5'
      }
    },
    bigcup () {
      if (this.bigflag === 0) {
        this.bigflag = 1
        this.midflag = 0
        this.checkedflag = 1
        this.bigbgc = 'rgba(255,113,0,.2)'
        this.midbgc = '#f5f5f5'
      } else {
        this.bigflag = 0
        this.checkedflag = 0
        this.bigbgc = '#f5f5f5'
      }
    }
  },
  watch: {
    sMsg (newval, oldval) {
      // console.log(newval)
      this.searchlist = []
      axios.get('/pro/search?text=' + newval).then(res => {
        this.searchlist = res.data.data
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .searchbox {
    @include rect(100%,100%);
    overflow: auto;
    li {
      @include flexbox();
      @include rect(100%, 1.14rem);
      padding:8px 10px 10px;
      position: relative;
      .imgbox {
        @include rect(0.94rem,0.94rem);
        margin-right: 10px;
        img {
          @include rect(0.94rem,0.94rem);
          text-align: left;
        }
      }
      .k-t {
        font-size: 15px;
        color: #333;
      }
      .k-saled {
        margin-bottom: 3px;
        margin-top: 4px;
        height: .15rem;
        color: #999;
        font-size: 10px;
      }
      .specifications {
        margin-top: 30px;
        color: #ff7100;
        font-size: 17px;
        .options {
          @include rect(0.42rem,0.22rem);
          position: relative;
          display: inline-block;
          border-radius: .44rem;
          cursor: pointer;
          color: #fff;
          font-size: 11px;
          background-color: #ff7100;
          text-align: center;
          line-height: 0.22rem;
          margin-left: 1.4rem;
          z-index: 99;
        }
      }
      .cover {
        @include rect(3.75rem, 8rem);
        display: none;
        position: fixed;
        top:-58px;
        left: 0;
        z-index: 1000;
        background-color: rgba(0,0,0,.1);
        .coverinfo {
          @include rect(3.25rem,3.34rem);
          position: fixed;
          top: 15%;
          left: 7%;
          background-color: #fff;
          .cover-title {
            @include rect(100%,0.48rem);
            font-size: .16rem;
            font-weight: 600;
            color: #333;
            background-color: #fbfbfb;
            text-align: center;
            line-height: 0.48rem;
            position: relative;
            span {
              @include rect(0.16rem,0.16rem);
              height: 0.16rem !important;
              position: absolute;
              height: auto;
              top: 15px;
              right: 20px;
              line-height: 0.2rem;
              color: #ccc;
              font-size: .20rem;
            }
          }
          .cover-content {
            padding-left: 20px;
            @include rect(100%, 2.42rem);
            .cuptype {
            padding:15px 0 10px;
            color: rgb(102, 102, 102);
            font-size: 0.13rem;
            }
            .midcup, .bigcup{
              @include rect(0.4rem, 0.35rem);
              color: #666;
              background-color: #f5f5f5;
              border-radius: .02rem;
              display: inline-block;
              margin-right: .15rem;
              line-height: 0.35rem;
              text-align:  center;
            }
          }
          .cover-bottom {
            background-color: #fafafa;
            @include rect(100%, 0.44rem);
            @include flexbox();
            justify-content: space-between;
            align-items: center;
            .price {
              color: #ff7100;
              font-size: .2rem;
              line-height: .44rem;
              font-weight: 600;
              margin-left: 20px;
            }
            .joincar, .opt-type {
              @include rect(0.9rem, 0.3rem);
              background: rgb(255, 113, 0);
              line-height: 0.3rem;
              text-align: center;
              font-size: 14px;
              border-radius: .15rem;
              color: #fff;
              margin-right: 20px;
            }
            .opt-type {
              background: #aaa;
            }
          }
        }
      }
    }
  }
</style>
